<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>应用管理系统</title>
<meta name="msapplication-tap-highlight" content="no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="./images/favicon.png">
<meta name="keywords" content="应用管理系统"/>
<meta name="description" content="应用管理系统" />
<link media="all" rel="stylesheet" href="css/main.css" />
<link media="all" rel="stylesheet" href="css/datepicker.css" />
</head>
<body>
<!----顶部菜单样式//-->
<div id="topMenu" class="topMenu">
	<a></a>
	<b id="menuOpen"></b>
	<p>
		<input type="text"/>
		<a href="#"></a>
	</p>
	<div id="topLeftMenu" class="topLeftMenu">
		<!----当前菜单class增加currnav2样式//-->
		<a href="#" class="currnav2">菜单选项</a>
		<a href="#">菜单选项</a>
		<a href="#">菜单选项</a>
		<a href="#">菜单选项</a>
		<a href="#">菜单选项</a>
		<b id="navControl"></b>
	</div>
	<div id="topRightMenu">
		<!----当前主题class增加currtheme样式//-->
		<b class="theme-01" for="theme01"></b>
		<b class="theme-02" for="theme02"></b>
		<b class="theme-03" for="theme03"></b>
		<p></p>
		<a class="user-01" href="#">系统消息</a>
		<a class="user-02" href="#">修改密码</a>
		<a class="user-03" href="#">退出系统</a>
	</div>
</div>
<!----左边菜单样式//-->
<div id="leftMenu" class="leftMenu">
	<!----当前菜单class增加currnav样式//-->
	<a href="#" class="nav-01 currnav">一级菜单</a>
	<a href="#" class="nav-02">一级菜单</a>
	<a href="#" class="nav-03">一级菜单</a>
	<a href="#" class="nav-04">一级菜单</a>
	<a href="#" class="nav-05">一级菜单</a>
</div>
<div id="outerWrap">
	<div id="leftWrap" class="leftWrap">
		<span></span>
		<label>数据采集分发步骤</label>
		<ul id="leftNavList">
			<!----当前菜单class增加curr样式//-->
			<li class="curr"><span>新闻采集模型组</span>
				<ul>
					<!----当前菜单class增加currLeftNav样式//-->
					<li><a href="#" class="currLeftNav">媒体热点</a></li>
					<li><a href="#">新闻报道</a></li>
				</ul>
			</li>
			<li><span>图片采集模型组</span>
				<ul>
					<li><a href="#">媒体热点</a></li>
					<li><a href="#">新闻报道</a></li>
				</ul>
			</li>
			<li><span>视频彩集模型组</span>
				<ul>
					<li><a href="#">媒体热点</a></li>
					<li><a href="#">新闻报道</a></li>
				</ul>
			</li>
			<li><span>动作捕捉模型组</span>
				<ul>
					<li><a href="#">媒体热点</a></li>
					<li><a href="#">新闻报道</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="rightWrap" class="rightWrap">
		<div id="mainContainer">
			<!---------------热点新闻滚动区域开始//----------------->
			<div id="mainPlus" style="display:block;">
				<dl>
					<dt><p>媒体热点</p><span>150</span></dt>
					<dd>
						<a href="#">&lt;</a>
						<span>5/10</span>
						<a href="#">&gt;</a>
					</dd>
				</dl>
				<div id="mediaTop">
					<p>最近24小时滚动热点</p>
					<div id="news-sort" value="" class="selectStyle">
						<span>新闻排序</span>
						<ul class="selectDown">
							<li value="">发布时间</li>
							<li value="0">浏览量</li>
							<li value="1">评论量</li>
						</ul>
					</div>
				</div>
				<ul id="newsContainer">
					<li>
						<h3>京东方面回应“刘强东退出管理员”：假新闻</h3>
						<span>假新闻。11月19日，京东集团发布了2018年第三季度业绩，在美国通用会计准则下（GAAP）归属于普通股股东归属于普通股股东</span>
						<p>
							<b>关键词：京东 刘强东 业务</b>
							<span><b>27.52</b><i>+0.00</i></span>
						</p>
						<div>
							<p>5分钟前</p>
							<span>经济</span>
							<a href="#" class="ico-03"></a>
							<a href="#" class="ico-02"></a>
							<a href="#" class="ico-01"></a>
						</div>
					</li>
					<li>
						<h3>京东方面回应“刘强东退出管理员”：假新闻</h3>
						<span><img src="images/news_img.jpg" />假新闻。11月19日，京东集团发布了2018年第三季度业绩，在美国通用会计准则下（GAAP）归属于普通股股东归属于普通股股东</span>
						<p>
							<b>关键词：京东 刘强东 业务</b>
							<span><b>27.52</b><i>+0.00</i></span>
						</p>
						<div>
							<p>5分钟前</p>
							<span>经济</span>
							<a href="#" class="ico-03"></a>
							<a href="#" class="ico-02"></a>
							<a href="#" class="ico-01"></a>
						</div>
					</li>
					<li>
						<h3>京东方面回应“刘强东退出管理员”：假新闻</h3>
						<span><img src="images/news_img.jpg" />假新闻。11月19日，京东集团发布了2018年第三季度业绩，在美国通用会计准则下（GAAP）归属于普通股股东归属于普通股股东</span>
						<p>
							<b>关键词：京东 刘强东 业务</b>
							<span><b>27.52</b><i>+0.00</i></span>
						</p>
						<div>
							<p>5分钟前</p>
							<span>经济</span>
							<a href="#" class="ico-03"></a>
							<a href="#" class="ico-02"></a>
							<a href="#" class="ico-01"></a>
						</div>
					</li>
					<li>
						<h3>京东方面回应“刘强东退出管理员”：假新闻</h3>
						<span><img src="images/news_img.jpg" />假新闻。11月19日，京东集团发布了2018年第三季度业绩，在美国通用会计准则下（GAAP）归属于普通股股东归属于普通股股东</span>
						<p>
							<b>关键词：京东 刘强东 业务</b>
							<span><b>27.52</b><i>+0.00</i></span>
						</p>
						<div>
							<p>5分钟前</p>
							<span>经济</span>
							<a href="#" class="ico-03"></a>
							<a href="#" class="ico-02"></a>
							<a href="#" class="ico-01"></a>
						</div>
					</li>
				</ul>
			</div>
			<!---------------热点新闻滚动区域结束//----------------->
			<!---------------新闻内容区域开始，若是没有新闻滚动区域，则下面style为空或删除336px//----------------->
			<div id="mainBody" class="c-datepicker-box" style="margin-left:336px;">
				<h4 id="newsSource">中证网-公司-公司新闻  /  来源：中国证券报、中证网  /  2018-11-20 12:13:09  /</h4>
				<h2 id="newsTitle">这里是文章标题</h2>
				<div id="newsDetail">
					<div id="newsTips">
						<p>关键词：京东 刘强东 业务</p>
						<a href="#" class="ico-03"></a>
						<a href="#" class="ico-02"></a>
						<a href="#" class="ico-01"></a>
					</div>
					<div id="newsInner">
这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...这是是正文区...	
					</div>
				</div>
				<dl class="styleDemo">
					<dt>输入框样式：</dt>
					<dd>
						<input type="text" class="comInput" placeholder="" value="输入框样式" />
					</dd>
					<dt>下拉框样式：</dt>
					<dd>
						<div id="demo-sort" value="" class="selectStyle">
							<span>发布时间</span>
							<ul class="selectDown">
								<li value="1">选择框内容1</li>
								<li value="2">选择框内容2</li>
								<li value="3">选择框内容3</li>
								<li value="4">选择框内容3</li>
								<li value="5">选择框内容3</li>
							</ul>
						</div>
					</dd>
					<dt>按钮样式(a或者button标签都可以)：</dt>
					<dd>
						<a href="#" class="butLetterBlue">文字</a>
						<a href="#" class="butLetterWhite">文字</a>
						<a href="#" class="butLetterIcoBlue">图标</a>
						<a href="#" class="butLetterIcoWhite">图标</a>
						<a href="#" class="butIcoBlue"></a>
						<a href="#" class="butIcoWhite"></a>
					</dd>
					<dt>复选项样式：</dt>
					<dd id="checkboxList">
						<b class="checkboxStyle" value="复选项1"></b>
						<b class="checkboxStyle curr" value="复选项2">复选项2</b>
						<b class="checkboxStyle" value="复选项3">复选项3</b>
						<b class="checkboxStyle curr" value="复选项4">复选项4</b>
					</dd>
					<dt>单选项样式：</dt>
					<dd id="radioList">
						<b class="radioStyle" value="单选项1"></b>
						<b class="radioStyle" value="单选项2">单选项2</b>
						<b class="radioStyle" value="单选项3">单选项3</b>
						<b class="radioStyle curr" value="单选项4">单选项4</b>
					</dd>
					<dt>分页列表样式：</dt>
					<dd>
						<p class="pagesContainer">
							<a href="#">上一页</a>
							<a href="#">1</a>
							<a href="#" class="curr">2</a>
							<a class="disabled">...</a>
							<a href="#">9</a>
							<a href="#">10</a>
							<a href="#">下一页</a>
						</p>
					</dd>
					<dt>这里是分块标题：</dt>
					<dd>
						<p class="blockTitle">这里是分块标题</p>
					</dd>
					<dt>切换页样式：</dt>
					<dd>
						<div class="labelChange" id="labelChange">
							<a href="#" value="1" class="curr">当前标签</a>
							<a href="#" value="2">当前标签</a>
							<a href="#" value="3">标签</a>
							<a href="#" value="4">标签22</a>
							<a href="#" value="5">当前标签</a>
							<a href="#" value="6">当前标签</a>
							<a href="#" value="7">当前标签</a>
						</div>
					</dd>
					<dt>表格样式：</dt>
					<dd>
						<div class="tableTop">
							<p>
								<a href="#" class="butLetterBlue">创建新功能</a>
								<a href="#" class="butIcoWhite"></a>
								<a href="#" class="butIcoWhite" style="background-image:url(images/copy_gray.png);"></a>
								<a href="#" class="butIcoWhite" style="background-image:url(images/paste_gray.png);"></a>
								<a href="#" class="butIcoWhite" style="background-image:url(images/play_gray.png);"></a>
							</p>
							<div id="demo-sort2" value="" class="selectStyle">
								<span>发布时间</span>
								<ul class="selectDown">
									<li value="1">选择框内容1</li>
									<li value="2">选择框内容2</li>
									<li value="3">选择框内容3</li>
									<li value="4">选择框内容3</li>
									<li value="5">选择框内容3</li>
								</ul>
							</div>
							<div id="demo-sort3" value="" class="selectStyle">
								<span>发布时间</span>
								<ul class="selectDown">
									<li value="1">选择框内容1</li>
									<li value="2">选择框内容2</li>
									<li value="3">选择框内容3</li>
									<li value="4">选择框内容3</li>
									<li value="5">选择框内容3</li>
								</ul>
							</div>
						</div>
						<div class="tableList" id="tableList">
							<p class="tableHeader">
								<span>排名</span>
								<span>标题</span>
								<span>url</span>
								<span>详情</span>
								<span>页面浏览量</span>
								<span>访问者数</span>
								<span>发稿日期</span>
								<span>编辑</span>
								<span>节点</span>
							</p>
							<p>
								<span><b class="checkboxStyle" value="1">1</b></span>
								<span>情面大学习网上主图团课第九期已送达！</span>
								<span><a href="#" class="linkGrayColor">http://h5.cyol.com</a></span>
								<span><a href="#" class="linkWithIco"></a></span>
								<span>32564</span>
								<span>51485</span>
								<span>2018-09-09</span>
								<span>张正</span>
								<span>最新作品</span>
							</p>
							<p>
								<span><b class="checkboxStyle" value="2">2</b></span>
								<span>情面大学习网上主图团课第九期已送达！</span>
								<span><a href="#" class="linkGrayColor">http://h5.cyol.com</a></span>
								<span><a href="#" class="linkWithIco"></a></span>
								<span>32564</span>
								<span>51485</span>
								<span>2018-09-09</span>
								<span>张正</span>
								<span>最新作品</span>
							</p>
							<p>
								<span><b class="checkboxStyle" value="3">3</b></span>
								<span>情面大学习网上主图团课第九期已送达！</span>
								<span><a href="#" class="linkGrayColor">http://h5.cyol.com</a></span>
								<span><a href="#" class="linkWithIco"></a></span>
								<span>32564</span>
								<span>51485</span>
								<span>2018-09-09</span>
								<span>张正</span>
								<span>最新作品</span>
							</p>
						</div>
						<div class="tableFooter">
							<span id="tableFooterBut">
								<b class="checkboxStyle" value="1">全选 &nbsp;</b>
								<a href="javascript:;" class="butLetterWhite" id="selectReverse">反选</a>
								<a href="#" class="butLetterWhite">文字</a>
								<a href="#" class="butLetterWhite">文字</a>
								<a href="#" class="butLetterWhite">文字</a>
							</span>
							<p class="pagesContainer">
								<a href="#">上一页</a>
								<a href="#">1</a>
								<a href="#" class="curr">2</a>
								<a class="disabled">...</a>
								<a href="#">9</a>
								<a href="#">10</a>
								<a href="#">下一页</a>
							</p>
						</div>
					</dd>
					<dt>时间范围样式：</dt>
					<dd>
						<div class="c-datepicker-date-editor J-datepicker-range mt10">
							<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
							<input placeholder="开始日期" name="" class="c-datepicker-data-input" value="2018-01-01 04:00:00">
							<span class="c-datepicker-range-separator">-</span>
							<input placeholder="结束日期" name="" class="c-datepicker-data-input" value="2018-03-01 04:00:00">
						</div>
					</dd>
					<dt>图例样式1：</dt>
					<dd>
						<div class="chartDemo"><canvas id="canvasVerticle" width="500" height="250"></canvas></div>
					</dd>
					<dt>图例样式2：</dt>
					<dd>
						<div class="chartDemo"><canvas id="canvasLine" width="500" height="250"></canvas></div>
					</dd>
					<dt>图例样式3：</dt>
					<dd>
						<div class="chartDemo"><canvas id="canvasPie" width="500" height="250"></canvas></div>
					</dd>
					<dt>图例样式4：</dt>
					<dd>
						<div class="chartDemo"><canvas id="canvasMutiLine" width="500" height="250"></canvas></div>
					</dd>
				</dl>
			</div>
			<!---------------新闻内容区域结束//----------------->
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!---------------moment.min.js日期选择和图表使用//----------------->
<script type="text/javascript" src="js/moment.min.js"></script>
<!---------------datepicker.all.js日期选择使用//----------------->
<script type="text/javascript" src="js/datepicker.all.js"></script>
<!---------------Chart.bundle.min.js图表使用//----------------->
<script type="text/javascript" src="js/Chart.bundle.min.js"></script>
<!---------------common.plugin.js自定义插件使用//----------------->
<script type="text/javascript" src="js/common.plugin.js"></script>
<!---------------common.action.js自定义函数使用//----------------->
<script type="text/javascript" src="js/common.action.js"></script>
<script type="text/javascript">
$(function(){
	SetCommonControl();  //加载公共控制

	//滚动新闻下拉菜单设置，after为选择回调函数名称，带两个参数，回调函数可为空
	//$('#news-sort').selectChange({after:NewsSelectChange});
	$('.selectStyle').selectChange({after:NewsSelectChange});
	function NewsSelectChange(text,val){
		console.log("text=>"+text+"  //  val=>"+val);
	}
	
	

	//复选框设置控制,$(#装本组checkbox的容器).checkboxSet({"boxclass":"复选项的classname，默认checkboxStyle"});
	//若是默认选择，可以在默认选择样式中添加curr样式名，本组的选择值在本组checkbox的容器的属性value中获取，多值用英文逗号分隔
	//after为选择回调函数名称，带一个参数为当前组的选项值，回调函数可为空
	$('#checkboxList').checkboxSet();
	$('#tableList').checkboxSet({boxclass:"checkboxStyle",after:CheckBoxChange1});
	function CheckBoxChange1(val){
		$('#tableFooterBut').data('checkboxSet').unselectAll();
	}
	$('#tableFooterBut').checkboxSet({boxclass:"checkboxStyle",after:CheckBoxChange2});
	function CheckBoxChange2(val){
		if(parseInt(val)==1){
			$('#tableList').data('checkboxSet').selectAll();  //全选
		}else{
			$('#tableList').data('checkboxSet').unselectAll();  //全不选
		}
	}
	$("#selectReverse").on("click",function(){
		$('#tableList').data('checkboxSet').selectReverse();  //反选
	});


	//单选框设置控制,$(#装本组radio的容器).radioSet({"boxclass":"单选项的classname，默认radioStyle"});
	//若是默认选择，可以在默认选择样式中添加curr样式名，本组的选择值在本组radio的容器的属性value中获取
	//after为选择回调函数名称，带一个参数为当前组的选项值，回调函数可为空
	$('#radioList').radioSet({boxclass:"radioStyle",after:RadioChange});
	function RadioChange(val){
		console.log(val);
	};

	//切换页样式控制,$(#装本组Tab的容器).tabLabelSet({"boxType":"Tab的标签类型，默认a标签"});
	//若是默认选择，可以在默认选择样式中添加curr样式名，本组的选择值在本组Tab的容器的属性value中获取
	//after为选择回调函数名称，带一个参数为当前组的选项值，回调函数可为空
	$('#labelChange').tabLabelSet({boxType:"a",after:tabChange});
	function tabChange(val){
		console.log(val);
	};

	//时间范围选择器
	//十分秒年月日范围，包含最大最小值
	$('.J-datepicker-range').datePicker({
		hasShortcut: true,
		min: '2018-01-01 06:00:00',
		max: '2019-04-29 20:59:59',
		isRange: true,
		shortcutOptions: [{
			name: '昨天',
			day: '-1,-1',
			time: '00:00:00,23:59:59'
		},{
			name: '最近一周',
			day: '-7,0',
			time:'00:00:00,'
		}, {
			name: '最近一个月',
			day: '-30,0',
			time: '00:00:00,'
		}, {
			name: '最近三个月',
			day: '-90, 0',
			time: '00:00:00,'
		}],
		hide: function () {
			console.info(this.$input.eq(0).val(), this.$input.eq(1).val())
		}
	});
	
	//图表使用chartjs插件，更多使用方法可以参考官网https://www.chartjs.org/
	//展示竖直图表
	SetVerticleChart();
	//展示线条图表
	SetLineChart();
	//展示饼状图表
	SetPieChart();
	//展示多线条图表
	SetMutiLineChart();
});
</script>
</body>
</html>